<template>
  <el-container>
    <el-header style="height: 47px;">
      <p>重复支付查询</p>
    </el-header>
    <el-main>
      <el-row class="btn-group">
      <el-button class="btn"
                 @click="handleDownloadDouPay"><span>导出</span><i class="el-icon-download"></i>
      </el-button>
      </el-row>
      <el-table :data="dataList" v-loading="listLoading" element-loading-text="给我一点时间"
                highlight-current-row stripe
                style="width: 100%" ref="douPayTable" @selection-change="handleSelectChangeDouPay">
        <el-table-column fixed sortable align="center" label="订单号" width="150" prop="out_trade_no" show-overflow-tooltip >
          <template slot-scope="scope">
            <span>{{scope.row.out_trade_no}}</span>
          </template>
        </el-table-column>
        <el-table-column    sortable align="center" label="流水号" width="150" prop="account_no" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.account_no}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="车牌号" width="200" prop="account_carno">
          <template slot-scope="scope">
            <span>{{scope.row.account_carno}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="车辆类型" width="200" prop="account_cartypename">
          <template slot-scope="scope">
            <span>{{scope.row.account_cartypename}}</span>
          </template>
        </el-table-column>
        <el-table-column  sortable align="center" label="数据类型" width="200" prop="datatype">
          <template slot-scope="scope">
            <span>{{scope.row.datatype}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="应收金额" width="200" prop="account_should">
          <template slot-scope="scope">
            <span>{{scope.row. account_should}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="支付金额" width="200" prop="account_money">
          <template slot-scope="scope">
            <span>{{scope.row.account_money}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="交费时间" width="200" prop="account_paytime">
          <template slot-scope="scope">
            <span>{{scope.row.account_paytime}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="数据生成时间" width="200"  prop="checkdate">
          <template slot-scope="scope">
            <span>{{scope.row.checkdate}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="手续费" width="200" sortable prop="account_poundage">
          <template slot-scope="scope">
            <span>{{scope.row.account_poundage }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="支付方式" width="200" sortable prop="account_paytypevalue">
          <template slot-scope="scope">
            <span>{{scope.row.account_paytypevalue}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="所属区" width="200" sortable prop="account_org">
          <template slot-scope="scope">
            <span>{{scope.row.account_org}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="路段" width="200" sortable prop="account_chargeunitname">
          <template slot-scope="scope">
            <span>{{scope.row.account_chargeunitname}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="入场时间" width="200" sortable prop="account_intime">
          <template slot-scope="scope">
            <span>{{scope.row.account_intime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="最后取证时间" width="200" sortable prop="account_outtime">
          <template slot-scope="scope">
            <span>{{scope.row.account_outtime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作出场时间" width="200" sortable prop="account_handletime">
          <template slot-scope="scope">
            <span>{{scope.row.account_handletime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="停车时长" width="200" sortable prop="account_btime">
          <template slot-scope="scope">
            <span>{{scope.row.account_btime}}</span>
          </template>
        </el-table-column>
        <!--<el-table-column align="center" label="描述信息" width="200">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{scope.row.appzfbmoney}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column align="center" label="审核人姓名" width="200" sortable prop="auditorname">
          <template slot-scope="scope">
            <span>{{scope.row.auditorname}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核人单位名称" width="200" sortable prop="auditorgname">
          <template slot-scope="scope">
            <span>{{scope.row.auditorgname}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="审核状态" width="100" sortable prop="auditstatevalue">
          <template slot-scope="scope">
            <span>{{scope.row.auditstatevalue}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核时间" width="100" sortable prop="audittime" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.audittime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核意见" width="100" sortable prop="auditopinion">
          <template slot-scope="scope">
            <span>{{scope.row.auditopinion}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" width="100" label="操作">
          <template slot-scope="scope">
            <span class="btn-group" >
            <el-button class="btn" style=" margin-bottom: 0px"
                       :disabled="scope.row.auditstatevalue=='已审核'? true: false"
                       @click="handleReview(scope.row)"><span>审核</span><i class="el-icon-edit-outline"></i>
            </el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination  style="margin-top: 16px" background @size-change="handleSizeChangeDouPay" @current-change="handleCurrentChangeDouPay"
                     :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-footer>
      <el-dialog title="审核" :visible.sync="checkDialog" center>
        <el-form   :rules="rulesDouPay"  :model="checkModel" :label-position="'left'" label-width="90px" style="width: 400px; margin-left:50px;" >
          <el-form-item label="商户订单号" prop="out_trade_no">
            <el-input clearable readonly v-model="checkModel.out_trade_no"></el-input>
          </el-form-item>
          <el-form-item label="订单流水号" prop="account_no">
            <el-input clearable readonly v-model="checkModel.account_no"></el-input>
          </el-form-item>
          <el-form-item label="车牌号" prop="account_carno">
            <el-input clearable readonly v-model="checkModel.account_carno"></el-input>
          </el-form-item>
          <el-form-item label="支付金额" prop="account_money">
            <el-input clearable readonly v-model="checkModel.account_money"></el-input>
          </el-form-item>
          <el-form-item label="审核意见" prop="auditopinion">
            <el-input clearable type="textarea" v-model="checkModel.auditopinion" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="checkDialog = false" class="btn-search">取消</el-button>
          <el-button  type="primary" class="btn-search" @click="review">确定</el-button>
        </div>
    </el-dialog>
  </el-container>
</template>

<script>
  /* eslint-disable */
  import {checkDouPay} from "../../../api/trademag/douPay";
  import ElMain from "element-ui/packages/main/src/main";
  import ElFooter from "element-ui/packages/footer/src/main";
  import ElDialog from "element-ui/packages/dialog/src/component";

  export default {
    components: {
      ElFooter,
      ElMain},
    name: "dou-payment-table",
    props:['searchList','listLoadingDouPay'],
    watch:{
      searchList(val){
        this.dataList=val.list
        this.total=val.count
      },
      listLoadingDouPay(val){
        this.listLoading=val
      }
    },
    data() {
      return {
        listLoading: false,
        downloadLoading: false,
        checkDialog: false,
        dataList: null,
        tempModel: null,
        selectList: [],
        total: 0,
        listQuery: {
          page: 1,
          limit: 20
        },
        checkModel:{
          account_carno:"",
          account_money:'',
          account_no:'',
          auditopinion:'',
          out_trade_no:'',
        },
        rulesDouPay: {
          auditopinion: [{required: true, message: '请输入审核意见', trigger: 'blur'}],
        }
      }
    },
    methods:{
      handleDownloadDouPay(){
        this.downloadLoading=true
      },
      handleReview(val){
        this.checkDialog=true
        this.checkModel = Object.assign({}, val) // copy obj
        // this.checkModel.account_carno=val.account_carno
        // this.checkModel.account_money=val.account_money
        // this.checkModel.account_no=val.account_no
        // this.checkModel.out_trade_no=val.out_trade_no

      },
      handleSelectChangeDouPay(val) {
        this.selectList = val
      },
      handleSizeChangeDouPay(val) {
        this.listQuery.limit = val
        this.$emit("handleSizeChangeDouPay",val)
      },
      handleCurrentChangeDouPay(val) {
        this.listQuery.page = val
        this.$emit("handleCurrentChangeDouPay",val)
      },
      review(){
        checkDouPay(this.checkModel).then(()=>{
          this.checkDialog=false
          this.checkModel.auditstate='2'
          this.checkModel.auditstatevalue='已审核'
          for (const v of this.dataList) {
            if (v.out_trade_no === this.checkModel.out_trade_no) {
              const index = this.dataList.indexOf(v)
              this.dataList.splice(index, 1, this.checkModel)
              break
            }
          }
          this.$message({
            showClose: true,
            message: '审核成功',
            duration:2000,
            type: 'success'
          })
        },
          err=>{
            this.checkDialog=false
            this.$message({
              showClose: true,
              message: '审核失败',
              duration:2000,
              type: 'error'
            })
        })
      }
    }
  }
</script>

<style scoped>
  .btn-group > .el-button span{
    display: none;
  }
  .btn-group > .el-button:hover{
    background-color: #409EFF;
  }
  .btn-group > .el-button:hover span{
    display: block;
  }
  .btn-group > .el-button:hover i{
    display: none;
  }

</style>
